<template>
	<div class="evaluate">
		
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>评价</div>
			<div @click="issue">发布</div>
		</header>
		
		<div class="appraisetitle">
			<div @click="goodon">
				<img src="../assets/appraise.png" v-show='!goodshow'>
				<img src="../assets/appraise_2.png" v-show='goodshow'>
				好评
			</div>
			<div @click="inon">
				<img src="../assets/appraise.png" v-show='!inshow'>
				<img src="../assets/appraise_2.png" v-show='inshow'>
				中评
			</div>
			<div @click="badon">
				<img src="../assets/appraise.png" v-show='!badshow'>
				<img src="../assets/appraise_2.png" v-show='badshow'>
				差评
			</div>
		</div>
		
		<div class="content">
			<textarea name="" rows="6" cols="" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享改想买的他们呗" maxlength="500" ref='content'></textarea>
		</div>
		
		
		
		<div class="addimg">
			<el-upload
			  class="upload-demo"
			  action="https://www.uhuijia.com.cn/image-server/uploadImage/oss"
			  :on-success='ok'
			  :file-list="fileList2"
			  list-type="picture"
			  :limit='3'
			  >
			  <el-button size="small" type="primary">点击上传图片</el-button>
			</el-upload>
		</div>
		<div class="addimg_d">
			<div v-for="item in img"><img :src="item"></div>
		</div>
		
		<div class="goodsevaluate">
			<h4>商品评价</h4>
			<div class="goodsevaluate_d">
				<div>描述相符</div>
				<div>
					<p class="all" >
			            <input type="radio" name="a" value="0"  v-model="inputdata"/>
			            <span>★</span>
			            <input type="radio" name="a" value="1" v-model="inputdata" />
			            <span>★</span>
			            <input type="radio" name="a" value="2" v-model="inputdata" />
			            <span>★</span>
			            <input type="radio" name="a" value="3" v-model="inputdata" />
			            <span>★</span>
			            <input type="radio" name="a" value="4" v-model="inputdata" />
			            <span>★</span>
			            <input type="radio" name="a" value="5" v-model="inputdata" />
			            <span>★</span>
			       </p>
				</div>
			</div>
			<div  class="goodsevaluate_d">
				<div>物流服务</div>
				<div>
					<p class="all" >
			            <input type="radio" name="b" value="0"  v-model="inputdata2"/>
			            <span>★</span>
			            <input type="radio" name="b" value="1" v-model="inputdata2" />
			            <span>★</span>
			            <input type="radio" name="b" value="2" v-model="inputdata2" />
			            <span>★</span>
			            <input type="radio" name="b" value="3" v-model="inputdata2" />
			            <span>★</span>
			            <input type="radio" name="b" value="4" v-model="inputdata2" />
			            <span>★</span>
			            <input type="radio" name="b" value="5" v-model="inputdata2" />
			            <span>★</span>
			       </p>
				</div>
			</div>
			<div  class="goodsevaluate_d">
				<div>服务态度</div>
				<div>
				<p class="all" >
			            <input type="radio" name="c" value="0"  v-model="inputdata3"/>
			            <span>★</span>
			            <input type="radio" name="c" value="1" v-model="inputdata3" />
			            <span>★</span>
			            <input type="radio" name="c" value="2" v-model="inputdata3" />
			            <span>★</span>
			            <input type="radio" name="c" value="3" v-model="inputdata3" />
			            <span>★</span>
			            <input type="radio" name="c" value="4" v-model="inputdata3" />
			            <span>★</span>
			            <input type="radio" name="c" value="5" v-model="inputdata3" />
			            <span>★</span>
			       </p></div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				goodshow:false,
				inshow:false,
				badshow:false,
				img:[],
				inputdata:'0',
				inputdata2:'0',
				inputdata3:'0',
				orderNo:'',
				token:'',
				skuId:'',
			}
		},
		created(){
			this.orderNo = this.$route.query.orderNo;
			this.token = localStorage.getItem('token');
			this.skuId = this.$route.query.skuId;
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//好评
			goodon:function(){
				this.goodshow = !this.goodshow;
				this.inshow = false;
				this.badshow = false;
			},
			//中评
			inon:function(){
				this.inshow = !this.inshow;
				this.goodshow = false;
				this.badshow = false;
			},
			//差评
			badon:function(){
				this.badshow = !this.badshow;
				this.goodshow = false;
				this.inshow = false;
			},
			ok:function(file){
				this.img.push(file.data.url)
			},
        	//发布
        	issue:function(){
        		var judgelev = '';
        		var content = this.$refs.content.value;
        		var img = String(this.img);
        		if(this.goodshow == true){
        			judgelev = "好评";
        		}else if(this.inshow == true){
        			judgelev = '中评';
        		}else if(this.inshow == true){
        			judgelev = '差评';
        		}
        		var url = BaseUrl + 'goods/skuFeedback/add?appId=wap' + '&token=' + this.token + '&reorder=1' + '&skuId=' + this.skuId + '&images=' + img + +'&content=' + content + '&overallLevel=' + judgelev + '&wuliuLevel=' + this.inputdata + '&descLevel=' + this.inputdata2 + '&serverLevel=' + this.inputdata3 + '&orderNo=' + this.orderNo;
        		if(judgelev !='' ){
        			this.$http.post(url).then(res=>{
	        			if(res.data.code == '10000'){
	        				Toast({
								message: '评价成功',
								position: 'middle',
								duration: 3000
							});
							this.$router.push({
								path:'/myindent'
							})
	        			}
        			}).catch(error=>{
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
        		}else{
        			Toast({
						message: '请完善评价信息',
						position: 'middle',
						duration: 3000
					});
        		}
         		
        	}
		},
        watch: {
            inputdata(value) {
//              console.log(value)
            },
            inputdata2(value) {
//              console.log(value)
            },
            inputdata3(value) {
//              console.log(value)
            }
        }
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
		border-bottom: 1px solid #e8dddd;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.appraisetitle{
		padding: 0.2rem 0.25rem;
		display: flex;
		justify-content: space-between;
	}
	.appraisetitle div{
		display: flex;
		align-items: center;
	}
	.appraisetitle div img{
		width: 0.6rem;
		height: 0.58rem;
		margin-right: 0.1rem;
	}
	.content{
		padding: 0.2rem 0.25rem;
		background: #fff;
		border-top: 0.2rem solid #f2f2f2;
	}
	textarea{
		width: 100%;
		padding: 0.2rem;
		border: 1px solid #CCCCCC;
		outline: none;
	}
	.addimg{
		background: #fff;
		padding: 0.2rem 0.2rem;
		height: 1.1rem;
		overflow: hidden;
	}
	.addimg_d{
		height: 2rem;
		display: flex;
		margin-bottom: 0.2rem;
	}
	.addimg_d div{
		width: 33%;
		margin: 0.1rem;
	}
	.addimg_d div img{
		width: 100%;
		height: 100%;
	}
	.add{
		width: 33%;
		height: 2rem;
		background-image: url(../assets/add.png);
		background-size: 100% 100%;
		margin-left: 0.25rem;
	}
	.file{
		width: 1.5rem;
		height: 4.5em;
		opacity: 0;
	}
	.goodsevaluate{
		padding: 0 0.25rem;
	}
	h4{
		color: #323232;
		font-size: 0.38rem;
		padding: 0.2rem 0;
		font-weight: normal;
	}
	.goodsevaluate_d{
		display: flex;
		margin-bottom: 0.2rem;
	}
	.all{
		margin-top: -0.25rem;
		margin-left: 0.2rem;
	}
	.all>input{opacity:0;position:absolute;width:0.4rem;height:0.4rem;margin:0;}
    .all>input:nth-of-type(1),
    .all>span:nth-of-type(1){display:none;}
    .all>span{
    	font-size:0.6rem;color:red;
        -webkit-transition:color .2s;
        transition:color .2s;
    }
    .all>input:checked~span{
    	color:#ccc;
    	}
    .all>input:checked+span{
    	color:red;}
</style>